<template>
  <el-form-item :label="label + '：'" :prop="name" :rules="rules">
    <el-input v-model="form[name]" :disabled="!editting" :placeholder="placeholder||`请输入${label}`" :type="type" :rows="rows" :autosize="autosize" :show-password="showPassword" :maxlength="count || maxlength || length" :minlength="minlength || length" :show-word-limit="!!count" autocomplete="off"></el-input>
  </el-form-item>
</template>

<script>
// https://github.com/yiminghe/async-validator
export default {
  props: {
    form: null,
    name: null,
    placeholder: null,
    rule: null, // 类型：password name phone code age idNo  email url date hex boolean number string float integer array object method regexp
    lines: null, //  true->textarea  4->rows=4 [1]=>autosize  [4]=>autosize row=4 [1,4]->autosize: { minRows: null, maxRows: 4 }
    count: null, // show-word-limit maxlength=count
    maxlength: null, // maxlength
    minlength: null, // minlength
    length: null, // length
    label: { default: '文字' },
    required: { default: true },
    editting: { default: true }
  },
  data() {
    return {
      type: 'text',
      rows: undefined,
      autosize: undefined,
      showPassword: false
    };
  },
  watch: {
    lines: {
      handler(cur) {
        if (cur === true) {
          this.type = 'textarea';
        } else if (typeof cur === 'number') {
          this.type = 'textarea';
          this.rows = cur;
        } else if (_.isArray(cur)) {
          if (cur.length === 1) {
            this.type = 'textarea';
            this.autosize = { minRows: cur[0] };
          } else {
            this.type = 'textarea';
            this.autosize = { minRows: cur[0], maxRows: cur[1] };
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    rules() {
      let { rule, required, label } = this;
      const message = `请输入${label}`;
      if (rule === 'password') {
        this.showPassword = true;
        return [{ required, message }];
      }
      if (!rule) {
        return [{ required, message }];
      }
      if (_.isFunction(rule)) {
        return [{ required, message }, { validator: rule }];
      }
      if (_.isArray(rule)) {
        if (_.includes(rule, 'password')) {
          this.showPassword = true;
          rule = _.reject(rule, (o) => o === 'password');
        }
        return [{ required, message }, ...rule.map((o) => (_.isFunction(o) ? { validator: o } : o))];
      }
      if (rule === 'name') {
        return [
          { required, message },
          { min: 2, max: 4, message: '请输入真实姓名' }
        ];
      }
      if (rule === 'phone') {
        return [{ required, message }, { validator: utils.checkTelePhone }];
      }
      if (rule === 'code') {
        return [{ required, message }, { validator: utils.checkCode }];
      }
      if (rule === 'age') {
        return [{ required, message }, { validator: utils.checkAgeNumber }];
      }
      if (rule === 'idNo') {
        return [{ required, message }, { validator: utils.checkIdNo }];
      }
      if (rule) {
        return [{ type: rule, required, message }];
      }
    }
  },
};
</script>

<style lang='less' scoped>
</style>
